<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>总耗油明细</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-form layout="inline">
        <a-form-item label="业务类型">
          <a-select v-model="searchForm.businessType" class="selectWidth">
            <a-select-option key="">全部</a-select-option>
            <a-select-option key="ORDER">业务订单</a-select-option>
            <a-select-option key="SHUNTING">业务调车</a-select-option>
            <a-select-option key="REPAIR">车辆维修</a-select-option>
            <a-select-option key="UPKEEP">车辆保养</a-select-option>
            <a-select-option key="ANNUAL">车辆年检</a-select-option>
            <a-select-option key="OTHER">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车辆">
          <a-select class="selectInputWidth"
            show-search
            :show-arrow="false"
            :filter-option="false" :default-active-first-option="false"
            :not-found-content="null"
            v-model="searchForm.truckId"
            @search="handleCarNameChange"
          >
            <a-select-option key="">全部</a-select-option>
            <a-select-option v-for="d in carLikeData" :key="d.truckId">{{ d.truckNumber }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="耗油批次">
          <a-input v-model="searchForm.batchNo"/>
        </a-form-item>
        <a-form-item label="日期">
          <a-range-picker @change="onChange"><a-icon slot="suffixIcon" type="calendar" /></a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="exportExcel">导出excel</a-button>
        </a-form-item>
      </a-form>

      <a-row style="text-align: center; border: 1px solid #e1e1e1; padding: 20px;margin: 20px 0">
        <a-col :span="8" class="assent">
          <p class="assent_mes">里程数（km）</p>
          <p class="assent_shu" style="margin-bottom:0;">{{statictisData.mileage}}</p>
        </a-col>
        <a-col :span="8" class="assent">
          <p class="assent_mes">耗油量（L）</p>
          <p class="assent_shu" style="margin-bottom:0;">{{statictisData.oilVolume}}</p>
        </a-col>
        <a-col :span="8">
          <p class="assent_mes">交易金额（L）</p>
          <p class="assent_shu" style="margin-bottom:0;">{{statictisData.totalAmount}}</p>
        </a-col>
      </a-row>

      <a-table :columns="columns"
        :data-source="tableData"
        :loading="loading" class="tableMargin"
        :pagination="pagination" rowKey="inAndOutId">
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="order" slot-scope="text, record">
          <router-link v-if="text" :to="`/landCenter/orderDispatch/${record.orderId}`" target="_blank">{{text}}</router-link>
          <span v-if="!text">--</span>
        </template>
        <template slot="detail" slot-scope="text, record">
          <a @click='viewIt(record.inAndOutId)'>{{text}}</a>
        </template>
      </a-table>
    </div>

    <a-modal :visible="detailVisible" title="查看采购/加油批次" :footer="null" @cancel="closeDetail">
      <a-row>
        <a-col :span="24">
          <a-descriptions :column="2">
            <a-descriptions-item label="里程数(km)">
              {{detail.mileage}}
            </a-descriptions-item>
            <a-descriptions-item label="耗油系数(L/km)">
              {{detail.rate}}
            </a-descriptions-item>
            <a-descriptions-item label="耗油量(L)">
              {{detail.oilVolume}}
            </a-descriptions-item>
            <a-descriptions-item label="油耗费用(元)">
              {{detail.totalAmount}}<a style="margin-left: 20px" @click="() => {detailClose = !detailClose}">{{detailClose?'收起':'显示'}}价格明细</a>
            </a-descriptions-item>
            <a-descriptions :column="1">
              <a-col :span="24" v-show="detailClose">
                <a-table size="small" :columns="columns2" :data-source="detail.detailList" :pagination="false" rowKey="detailId"></a-table>
              </a-col>
            </a-descriptions>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import { queryTruckNumberDown } from '@/api'
import { commonExport } from '@/api/request'
import {queryAllOilOutList, queryAllOilOutStatistics, queryTruckOilInAndOutDetailByOut} from '@/api/landCenter'

export default {
  data () {
    this.handleCarNameChange = debounce(this.handleCarNameChange, 800)
    const columns = [
      {
        title: '序号',
        width: '70px',
        scopedSlots: {customRender: 'rn'}
      },
      {
        title: '业务类型',
        dataIndex: 'businessType'
      },
      {
        title: '车辆',
        dataIndex: 'truckNumber'
      },
      {
        title: '司机',
        dataIndex: 'driverName'
      },
      {
        title: '里程数（km）',
        dataIndex: 'mileage'
      },
      {
        title: '耗油量（L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '交易金额（元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '公司编号',
        dataIndex: 'truckOrderCode',
        scopedSlots: {customRender: 'order'}
      },
      {
        title: '耗油批次',
        dataIndex: 'batchNo',
        width: '160px',
        scopedSlots: {customRender: 'detail'}
      },
      {
        title: '日期',
        dataIndex: 'createTime'
      }
    ]

    return {
      searchForm: {
        businessType: '',
        truckId: '',
        batchNo: '',
        time1: '',
        time2: ''
      },
      loading: false,
      columns: columns,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      statictisData: {},
      carLikeData: [],
      // 详情modal
      detailClose: false,
      detailVisible: false,
      detail: {
        detailList: []
      },
      columns2: [{
        title: '采购/加油批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }]
    }
  },
  methods: {
    handleCarNameChange (nameLike) { // 自营类型的牵引车车牌号
      if (nameLike) {
        queryTruckNumberDown({
          truckNumber: nameLike,
          status: 1
        }).then(rsp => {
          this.carLikeData = rsp.data
        })
      } else {
        this.carLikeData = []
      }
    },
    onChange (date, dataStr) {
      this.searchForm.time1 = dataStr[0]
      this.searchForm.time2 = dataStr[1]
    },
    searchStatistis () {
      queryAllOilOutStatistics({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.statictisData = rsp.data
      })
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      this.searchStatistis() // 统计数据
      queryAllOilOutList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    exportExcel () {
      commonExport('/truckStock/exportAllOilOutList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    viewIt (inAndOutId) {
      this.detailVisible = true
      this.detail = {voucherPics: ''}
      queryTruckOilInAndOutDetailByOut({inAndOutId, sType: 2}).then(rsp => {
        this.detail = Object.assign({}, this.detail, rsp.data)
      })
    },
    closeDetail () {
      this.detailVisible = false
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>
